<template>
    <div>
        <div>
            <el-button size="default" @click="checkAllChange">{{ isCheckAll.name }}</el-button>
            <el-button size="default" @click="checkChange('1', isCheckEdit)">{{ isCheckEdit.name }}</el-button>
            <el-button size="default" @click="checkChange('2', isCheckAudit)">{{ isCheckAudit.name }}</el-button>
            <el-button size="default" @click="checkChange('3', isCheckAntiAudit)">{{ isCheckAntiAudit.name
                }}</el-button>
        </div>
        <el-table :data="data" border stripe max-height="480px">
            <el-table-column type="index" :index="indexMethod" align="center" width="50" label="#" />
            <el-table-column align="center" prop="cname" key="id" label="名称" width="180">
            </el-table-column>
            <el-table-column align="center" key="id" label="按钮列表">
                <template #default="scope">
                    <el-checkbox-group v-model="checkedCities" @change="">
                        <template v-for="(key, value) in scope.row.pushBtnMap">
                            <el-checkbox :label="value" :value="scope.row.roleMenuId + '_' + value">
                                {{ key }}
                                <!-- {{ scope.row.roleMenuId + '_' + value }} -->
                            </el-checkbox>
                        </template>
                    </el-checkbox-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="button-container">
            <el-button type="primary" @click="saveGrantbuttom">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
import request from '@/api/request';

const isCheckAll = ref({
    name: '全选',
    isCheck: true
})
const isCheckEdit = ref({
    name: '全选-编辑',
    isCheck: true
})
const isCheckAudit = ref({
    name: '全选-审核',
    isCheck: true
})
const isCheckAntiAudit = ref({
    name: '全选-反审核',
    isCheck: true
})

// 多选框引用对象
const checkedCitiesSet = ref(new Set())
const checkedCities = ref([])

let props = defineProps(['data'])
let emits = defineEmits(['close'])

// 表格数据
let data = ref([])
request.get('roleMenu/roleBtnStrById', {
    params: {
        id: props.data.id
    }
}).then(resp => {
    if (resp.code == 200) {
        data.value = resp.data
    }
})

// 查询角色按钮
request.get('roleMenu/getRoleMenuBtnStr', {
    params: {
        roleId: props.data.id
    }
}).then(resp => {
    resp.data.forEach((item: any) => {
        for (let m in item.pushBtnMap) {
            checkedCitiesSet.value.add(item.roleMenuId + "_" + m)
        }
    });
    checkedCities.value = Array.from(checkedCitiesSet.value);
})



// 全选择/取消
let checkAllChange = () => {
    if (isCheckAll.value.isCheck) {
        checkedCitiesSet.value = new Set()
        data.value.forEach(item => {
            for (let m in item.pushBtnMap) {
                checkedCitiesSet.value.add(item.roleMenuId + "_" + m)
            }
        })
        isCheckAll.value.name = '全取消'
    } else {
        checkedCitiesSet.value = new Set()
        isCheckAll.value.name = '全选'
    }
    checkedCities.value = Array.from(checkedCitiesSet.value);
    isCheckAll.value.isCheck = !isCheckAll.value.isCheck;
}

let checkChange = (type: String, cls: { name: String, isCheck: boolean; }) => {
    if (cls.isCheck) {
        data.value.forEach(item => {
            for (let m in item.pushBtnMap) {
                if (m == type) {
                    checkedCitiesSet.value.add(item.roleMenuId + '_' + m)
                }
            }
        })
        switch (type) {
            case '1':
                isCheckEdit.value.name = '全取消-编辑'
                break;
            case '2':
                isCheckAudit.value.name = '全取消-审核'
                break;
            case '3':
                isCheckAntiAudit.value.name = '全取消-反审核'
                break;
        }
    } else {
        switch (type) {
            case '1':
                isCheckEdit.value.name = '全选-编辑'
                break;
            case '2':
                isCheckAudit.value.name = '全选-审核'
                break;
            case '3':
                isCheckAntiAudit.value.name = '全选-反审核'
                break;
        }
        checkedCitiesSet.value.forEach(item => {
            if (item.toString().slice(-1) == type) {
                checkedCitiesSet.value.delete(item)
            }
        })
    }
    checkedCities.value = Array.from(checkedCitiesSet.value);
    cls.isCheck = !cls.isCheck
}

let saveGrantbuttom = () => {
    let map = new Map();
    checkedCities.value.forEach(item => {
        let str = item.split('_')
        if (map.has(str[0])) {
            let ss = map.get(str[0])
            ss = ss + ',' + str[1]
            map.set(str[0], ss)
        } else {
            map.set(str[0], str[1])
        }
    })
    const mapObject = Object.fromEntries(map)

    request.post('roleMenu/upRoleMenuStr', {
        mapObject: mapObject,
        roleId: props.data.id
    }).then(resp => {
        if (resp.code == 200) {
            close()
        }
    })
}

let close = () => {
    emits('close')
}

const indexMethod = (index) => {
    return index + 1;
}


</script>

<style scoped>
.el-table {
    margin-top: 20px;
}
</style>
